<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	    <%--<meta charset="utf-8"/>--%>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<META NAME="Language" CONTENT="zh-CN">
		<meta http-equiv="Expires" content="-10">
		<meta http-equiv="Pragma" content="No-cache">
		<meta http-equiv="'Cache-Control', 'private'">
		<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
			<title>移动支付管理系统登录</title>
	    <link rel="shortcut icon" href="favicon.ico"/>
	    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
	    <link href="css/style.css?v=4.1.0" rel="stylesheet"/>
	    <link href="css/login.css" rel="stylesheet"/>
	    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
	    <style type="text/css">
	    	.pwddefault{
	    		display: none;
	    	}
	    	.p_div{
	    		position: absolute;
			    background-color: gray;
			    width: 100%;
			    height: 100%;
			    top: 0px;
			    opacity: 0.1;
	    	}
	    	.c_div{
		    	border: 1px solid #f5f5f5;
			    position: absolute;
			    width: 384px;
			    height: 288px;
			    z-index: 1;
			    padding-left: 67px;
			    padding-right: 67px;
			    padding-top: 30px;
			    top: 30%;
			    left: 40%;
			    border-radius: 10px;
			    background-color: #fff;
	    	}
	    	.c_div input{
	    		margin-top: 15px;
	    		width: 100%;
	    		border-radius: 3px;
	    		border: 1px solid #ddd;
	    		font-size: 14px;
	    		height: 32px;
	    		text-align: center;
	    	}
	    	.c_div p{
	    		text-align: center;
	    		color: rgba(89, 169, 236, 0.89);
	    		font-weight: bold;
	    	}
	    	.c_div button{
	    		margin-top: 30px;
			    width: 55px;
			    height: 28px;
			    border-radius: 4px;
			    border: 0px;
			    font-size: 15px;
			    color:#fff;
			    background-color: rgba(89, 169, 236, 0.89);
	    	}
	    	.c_div .save_btn{
	    		margin-left: 58px;
	    	}
	    	.c_div .close_btn{
	    		margin-left: 20px;
	    	}
	    </style>
	</head>
	<body onkeydown="keyLogin()">
		<div class="main">
			<div style="float:left; height:80px; width:100px;">
				<img class="" src="<c:url value='/images/xingxing_left.png'/>"/>
			</div>
			<div class="boxcontainer">
				<!-- 登陆密码框 -->
			    <div class="login">
					<img class="img" src="<c:url value='/images/img01.png'/>" />
					<div class="loginbox">
						<img src="<c:url value='/images/title.png'/>" />
						<div style=" position: absolute; left:310px; top:70px;z-index:-1;">
							<img class="" src="<c:url value='/images/xingxing_right.png'/>"/>
						</div>
		                <form>
							<div class="user_word">
			                    <input type="text" style="padding-left:8px;" required="required"  id="loginName" placeholder="登陆账号"/>
			                    <input type="password" style="padding-left:8px;" required="required"  id="password" placeholder="登陆密码" minlength="6"/>
							</div>
							<div class="pic">
			                    <input type="text" required="required" style="padding-left:8px;"  id="validateCode" placeholder="验证码" style="color:#333"/>
			                    <img id="validateCodeImg" style="cursor:pointer;width:104px;height:38px;" onClick="javascript:getAuthCode();" title="点击换一张"/>
							</div>
		                </form>
						<div>
							<button class="but" type="button" id="loginBtn" onclick="login()">登录</button>
						</div>
			       	</div>
				</div>
			</div>
	        <div class="signup-footer">
	            <div class="pull-right">
	                &copy; 2017 All Rights Reserved. 江苏杰博实信息技术有限公司
	            </div>
	        </div>
		</div>
		<!-- 修改默认密码弹窗 -->
		<div class="pwddefault p_div"></div>
		<div class="pwddefault c_div pwddiv">
			<p>修改默认登陆密码</p>
			<input type="password" id="oldPwd" placeholder="原密码" minlength="6"/>
			<input type="password" id="newPwd" placeholder="新密码" minlength="6" regdesc="只能是字母和数字组合"/>
			<input type="password" id="cnewPwd" placeholder="确认新密码" same="#newPwd"/>
			<button type="button" class="save_btn" onclick="modifyPwd()">保存</button>
			<button type="button" class="close_btn">关闭</button>
		</div>
	</body>
	<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/script/layer/layer.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/script/bootstrap.min.js"></script>
	<script type="text/javascript">
		var params = {};
		$(function(){
			getAuthCode();
			$("#newPwd").focus(function(){
				layer.tips("密码必须且只能是数字和字母组合", "#newPwd", {tips: 1});
			});
			
			/*关闭弹窗，清空密码框的值*/
			$(".close_btn").click(function(){
				$(".pwddefault").hide();
				$(".pwddiv input").val("");
			});
		});
		
		/*验证码*/
		function getAuthCode(){
			$("#validateCodeImg").attr("src", "${pageContext.request.contextPath}/userlogin/authCode.do?time=" + Math.random());
		}
		
		/*登陆按钮*/
		function login(){
			if(check($("form input"))){
				return;
			}
			ajax("${pageContext.request.contextPath}/userlogin/login.do", loginSuccess);
		}
		
		function loginSuccess(){
			window.location.href = "${pageContext.request.contextPath}/userlogin/main.do";
		}
		
		function showModal(){
			$(".pwddefault").show();
		}
		
		function modifyPwd(){
			if(check($(".pwddiv input"))){
				return;
			}
			ajax("${pageContext.request.contextPath}/userlogin/modifyPwd.do", reload);
		}
		
		function reload(){
			window.location.reload();
		}
		
		function check($el){
			var isEmpty = false;
			$.each($el, function(i, el){
				if(tip($(el))){
					isEmpty = true;
					return !isEmpty;
				};
			});
			return isEmpty;
		}
		
		/*提示框*/
		function tip($el){
			var isEmpty = false, $id = $el.attr("id"), $val = $el.val();
			params[$id] = $val;
			if(!$val){// 验证是否为空
				layer.tips($el.attr("placeholder") + "不能为空", '#' + $id);
				isEmpty = true;
			}else if($el.attr("same") && $val !== $($el.attr("same")).val()){// 验证是否一致
				layer.tips($el.attr("placeholder") + "与" + $($el.attr("same")).attr("placeholder") + "不一致", '#' + $id);
				isEmpty = true;
			}else if($el.attr("minlength") && $val.length < $el.attr("minlength")){// 验证长度
				layer.tips($el.attr("placeholder") + "长度最少" + $el.attr("minlength") + "位", '#' + $id);
				isEmpty = true;
			}else if($el.attr("regdesc")){
				var reg = new RegExp(/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,50}$/);
				if(!reg.test($val)){
					layer.tips($el.attr("placeholder") + $el.attr("regdesc"), '#' + $id);
					isEmpty = true;
				}
			}
			return isEmpty;
		}
		
		function ajax(url, callback){
			$.ajax({
				url: url,
				data: params,
				async: false,
				success: function(data){
					if(data.respCode === 'USER_006'){
						showModal();
					}else if(data.respCode === 'SYS_000'){
						callback();
					}else{
						layer.msg(data.respMsg);
					}
				}
			});
		}
		
		//登录默认回车键
        function keyLogin(){
            if (event.keyCode === 13){  //回车键的键值为13
            	login();
            }
        }
	</script>
</html>